<template>
    <div class="detail">
        <div class="littlebox">
            <div class="image">
                <mt-swipe :show-indicators="false" :defaultIndex="1" @change="handleChange">
                    <mt-swipe-item v-for="pho of _h_img"><img :src="pho" style="width: 100%;"/></mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="iconfont icon-zuo1 goback" @click="$router.push({name:'list'})"></div>
            <div class="index">{{nowindex}}/{{long}}</div>
        </div>

        <div class="main">
            <div class="roominfo">
                <div class="left">
                    <p>
                        <span style="margin-right:7px;font-weight: 600">{{house.htitle}}</span>
                    </p>
                    <p>{{house.htype}}/{{house.hsquare}}m<sup>3</sup>/南/{{house.area}}</p>
                    <p>
                        <span style="color:#afeaca;background: #efeeee;margin-right: 10px">随时看房</span>
                        <span style="color:#fe929a;background: #efeeee;">地铁周边</span>
                    </p>
                </div>
                <div class="right">
                    <p>{{total}}元</p>
                    <p>{{ new Date().setTime(house.fb_time) | moment("from", 'now') }}</p>
                </div>
            </div>
            <div class="type">
                <button @click="showzz" v-show="sh" >整租</button>
                <p>
                    <button @click="showhz" ref="hezu" v-show="fsh" >合租</button>
                </p>
            </div>
            <div>
                <template v-if="showrooms">
                    <div class="hezu" v-for="(rtype,index) of house.rooms">
                        <p>
                            <button @click="showroomsinfo(index)">{{rtype.room_Type ? '主卧':'侧卧'}}</button>
                        </p>
                    </div>
                </template>
                <div style="clear:both"></div>
            </div>

            <div class="roomdep">房间配置</div>
            <div class="furniture">

                <div>
                    <div class="iconfont icon-xiyiji" v-if="showxyj"></div>
                    <div v-if="showxyj" class="name">洗衣机</div>
                </div>
                <div>
                    <div class="iconfont icon-dianshi" v-if="showtv"></div>
                    <div v-if="showtv" class="name">电视</div>
                </div>

                <div>
                    <div class="iconfont icon-shafa" v-if="showsfa"></div>
                    <div v-if="showsfa" class="name">沙发</div>
                </div>

                <div>
                    <div class="iconfont icon-Group-" v-if="showkdai"></div>
                    <div v-if="showkdai" class="name">宽带</div>
                </div>

                <div>
                    <div class="iconfont icon-chuang" v-if="showchuang"></div>
                    <div v-if="showchuang" class="name">床</div>
                </div>

                <div>
                    <div class="iconfont icon-kongtiao" v-if="showktiao"></div>
                    <div v-if="showktiao" class="name">空调</div>
                </div>

                <div>
                    <div class="iconfont icon-weishengjian" v-if="showwc"></div>
                    <div v-if="showwc" class="name">卫生间</div>
                </div>

                <div>
                    <div class="iconfont icon-hekriconqingjingyangtai" v-if="showytai"></div>
                    <div v-if="showytai" class="name">阳台</div>
                </div>


            </div>
            <div class="optition">位置及周边环境</div>
            <div class="map">
                <el-amap class="amap-box"
                         :center="center"
                         :zoom="12"
                         :zoomEnable="true"
                         :dragEnable="true">

                    <el-amap-marker vid="component-marker"
                                    :position="[108.413794,22.841888]"

                    ></el-amap-marker>
                </el-amap>


            </div>
            <div class="mapbox">
                <div class="mapnav" ref="mapnav" @click="ctab">
                    <div class="isactive">公交</div>
                    <div>商超</div>
                    <div>美食</div>
                    <div>银行</div>
                    <div>酒吧</div>
                </div>
                <!--  <div class="content">
                      <div class="mapinfo">
                          <div class="left">
                              <p>7-Eleven</p>
                              <p>光华路店距离您370米</p>
                          </div>
                          <div class="right">
                              <p class="iconfont icon-daohang"></p>
                              <p>去这里</p>
                          </div>
                      </div>
                  </div>-->
            </div>
        </div>
        <div class="bottom">
            <div style="background:#eff1f1;color:#ccc" @click="collect">收藏</div>
            <div style="background:#f3ca72">联系房主</div>
            <div style="background:#ffb001" @click="yuyue">立即预约</div>
        </div>
    </div>
</template>

<script>
    import '@/css/detail.css';
    import {Swipe, SwipeItem} from 'mint-ui';
    import { Toast } from 'mint-ui';

    export default {
        name: 'detail',
        data() {
            return {
                hid:'',
                ty:'',
                center: [108.36637, 22.817746],
                house: [], /*房间信息*/
                showrooms: false,
                showtv: false,
                showsfa: false,
                showxyj: false,
                showkdai: false,
                showchuang: false,
                showktiao: false,
                showwc: false,
                showytai: false,
                total: 0.00,
                _h_img: [],
                long: 0,
                nowindex: 1,
                rid: 0,
                sh:true,
                fsh:true,

            }
        },
        async created() {
            /*获取房间信息*/
            let _res = await this.$api.post('/house/listone', {
                hid: this.$route.query.hid,
            });
            this.house = _res.data.data;
            console.log(this.house);
            if(this.house.you_can == 1 && this.house.rooms.length ==0){
                this.fsh=false;
                this.sh=true;
            }
            if(this.house.rooms.length > 0){ /*判断分租的房子有没有人住,有则只能分组,无则能显示整租*/
                for (let v of this.house.rooms) {
                    if (v.uid) {
                        console.log('有用户');
                        this.sh=false;
                        this.fsh=true;
                    }
                }
            }


          if(this.house.you_can){
              this.total = this.house.z_pay;/*整租价格*/
          }else{
              this.total = this.house.f_pay;/*分租价格*/
          }

            let img = this.house.h_img.split(",");
            this._h_img = img;
            console.log(img);
            this.long = this._h_img.length;
            if (this.house.tv == 1) {
                this.showtv = true;
            } else {
                this.showtv = false;
            }

            if (this.house.sfa == 1) {
                this.showsfa = true;
            } else {
                this.showsfa = false;
            }
            if (this.house.xyj == 1) {
                this.showxyj = true;
            } else {
                this.showxyj = false;
            }

            if (this.house.kdai == 1) {
                this.showkdai = true;
            } else {
                this.showkdai = false;
            }

        },
        async mounted() {
            /* 接收房间id ....*/
            this.hid=this.$route.query.hid;/*获取房间id*/
            console.log(this.hid);


        },
        methods: {
            /*为导航添加下划线*/
            ctab(ev) {
                let vs = this.$refs['mapnav'].querySelectorAll("div");
                for (let v of vs) {
                    v.classList.remove('isactive')
                }
                ev.target.classList.add('isactive');

            },

            showroomsinfo(index) {
                this.ty=1;
                this.total = this.house.rooms[index].pay;
                this.rid = this.house.rooms[index].roomid;

                if (this.house.rooms[index].wc == 1) {
                    this.showwc = true;
                } else {
                    this.showwc = false;
                }
                if (this.house.rooms[index].chuang == 1) {
                    this.showchuang = true;
                } else {
                    this.showchuang = false;
                }
                if (this.house.rooms[index].ktiao == 1) {
                    this.showktiao = true;
                } else {
                    this.showktiao = false;
                }
                if (this.house.rooms[index].ytai == 1) {
                    this.showytai = true;
                } else {
                    this.showytai = false;
                }

            },
            showzz() {
                this.total = this.house.z_pay;
                this.ty=1;
            },
            showhz(){
                this.showrooms = !this.showrooms;
                this.showroomsinfo(0);

            },
            handleChange(index) {
                this.nowindex = index + 1
            },
            yuyue: async function () {
                if (this.ty){/*判断用户是否选择了房子或房间*/
                    //判断用户是否登录
                    if (!this.$store.state.userinfo.uid) {
                        Toast({
                            message: "你还没有登录,请先登录",
                        });
                        setTimeout(()=> this.$router.replace({ name: 'pwdLogin', query:{hid:this.hid} }),2000);
                    }else{

                        //生成订单
                        let res = await this.$api.post('/user/addorder', {
                            uid:this.$store.state.userinfo.uid,
                            hid: this.house.hid,
                            roomid: this.rid,

                        });
                        console.log(res);
                        if (res.data.state) {
                            //判断用户是否实名   如果没有实名,则跳到实名页面
                            if(!this.$store.state.userinfo.idcard){
                                this.$router.push({name: 'contract',query:{hid:this.house.hid,total:this.total}});
                            }else{
                                //否则跳到签约界面
                                this.$router.push({name: 'contract_list',query:{hid:this.house.hid}});
                            }

                        } else {
                            Toast({
                                message:"预约失败"+res.data.info,
                            })
                        }

                    }

                } else {
                    Toast({
                        message:"请选择房间",
                    })
                }



            },
            collect(){
                if(this.$store.state.userinfo.uid){
                    Toast({
                        message:'收藏成功',
                    });
                }else{
                    Toast({
                        message:'您还未登录,请先登录',
                    });
                }

            }

        },


    }


</script>

<style scoped>

    .amap-box {
        width: 500px;
        height: 500px;
    }
</style>
